﻿<phone:PhoneApplicationPage
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
	xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
	xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	xmlns:local="clr-namespace:FakeMarketplace"
	mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800" 
	x:Class="FakeMarketplace.AppMainPage"
	SupportedOrientations="Portrait" Orientation="Portrait"
	shell:SystemTray.IsVisible="False">
	<phone:PhoneApplicationPage.Resources>
		<Style x:Key="StartupButtonStyle" TargetType="Button">
			<Setter Property="Background" Value="Transparent"/>
			<Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
			<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
			<Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
			<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
			<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
			<Setter Property="Padding" Value="10,3,10,5"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="Button">
						<Grid Background="Transparent">
							<VisualStateManager.VisualStateGroups>
								<VisualStateGroup x:Name="CommonStates">
									<VisualState x:Name="Normal"/>
									<VisualState x:Name="MouseOver"/>
									<VisualState x:Name="Pressed"/>
									<VisualState x:Name="Disabled"/>
								</VisualStateGroup>
							</VisualStateManager.VisualStateGroups>
							<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="White" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="Left" FontFamily="Segoe WP SemiLight" FontSize="48"/>
						</Grid>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
	</phone:PhoneApplicationPage.Resources>
	<phone:PhoneApplicationPage.ApplicationBar>
		<shell:ApplicationBar Opacity="0.85" ForegroundColor="Transparent" BackgroundColor="Black">
			<shell:ApplicationBarIconButton IconUri="/icons/appbar.feature.search.rest.png" IsEnabled="True" Text="search"/>
		</shell:ApplicationBar>
	</phone:PhoneApplicationPage.ApplicationBar>

	<!--LayoutRoot is the root grid where all page content is placed-->
	<Grid x:Name="LayoutRoot" Background="Black">

		<!--Panorama control-->
		<controls:Panorama Title="apps marketplace" Foreground="White" SelectionChanged="Panorama_SelectionChanged">
			<controls:Panorama.Background>
                <ImageBrush Opacity="0.4" ImageSource="/MyApp/BackgroundArt.png"/>
			</controls:Panorama.Background>

			<!--Panorama item one-->
			<controls:PanoramaItem Header="">
				<StackPanel Orientation="Vertical" VerticalAlignment="Top" Tap="AppTileDisplayControl_Tap" Margin="0,24,0,0">
					<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding Apps[0].Name, Converter={StaticResource ToUpperCaseConverter}}" FontFamily="Segoe WP Black" FontSize="{Binding Apps[0].Name, Converter={StaticResource ComputeSizeConverter}}" LineHeight="{Binding Apps[0].Name, ConverterParameter=lineheight, Converter={StaticResource ComputeSizeConverter}}" LineStackingStrategy="BlockLineHeight" />
					<Image Height="100" Source="{Binding Apps[0].Image}" Stretch="Fill" Width="100" HorizontalAlignment="Left" Margin="10,0,0,0"/>
				</StackPanel>
				<!--Double line list with image placeholder and text wrapping-->
			</controls:PanoramaItem>

			<!--Panorama item one-->
			<controls:PanoramaItem Header="">
			<ScrollViewer Margin="0,-28,0,0">
					<StackPanel Margin="12,0,0,72">
						<TextBlock TextWrapping="Wrap" Text="categories" FontSize="74.667" FontFamily="Segoe WP SemiLight"/>
						<TextBlock TextWrapping="Wrap" Text="all" FontSize="45.333" FontFamily="Segoe WP Light" Margin="0,16,0,8"/>
                        <TextBlock TextWrapping="Wrap" Text="books + reference" FontSize="45.333" FontFamily="Segoe WP Light" Margin="0,0,0,8"/>
                        <TextBlock TextWrapping="Wrap" Text="business" FontSize="45.333" FontFamily="Segoe WP Light" Margin="0,0,0,8"/>
                        <TextBlock TextWrapping="Wrap" Text="education" FontSize="45.333" FontFamily="Segoe WP Light" Margin="0,0,0,8"/>
                        <TextBlock TextWrapping="Wrap" Text="entertainment" FontSize="45.333" FontFamily="Segoe WP Light" Margin="0,0,0,8"/>
                        <TextBlock TextWrapping="Wrap" Text="games" FontSize="45.333" FontFamily="Segoe WP Light" Margin="0,0,0,8"/>
                        <TextBlock TextWrapping="Wrap" Text="government + politics" FontSize="45.333" FontFamily="Segoe WP Light" Margin="0,0,0,8"/>
                        <TextBlock TextWrapping="Wrap" Text="health + fitness" FontSize="45.333" FontFamily="Segoe WP Light" Margin="0,0,0,8"/>
                        <TextBlock TextWrapping="Wrap" Text="kids + family" FontSize="45.333" FontFamily="Segoe WP Light" Margin="0,0,0,8"/>
                        <TextBlock TextWrapping="Wrap" Text="lifestyle" FontSize="45.333" FontFamily="Segoe WP Light" Margin="0,0,0,8"/>
                        <TextBlock TextWrapping="Wrap" Text="music + video" FontSize="45.333" FontFamily="Segoe WP Light" Margin="0,0,0,8"/>
                        <TextBlock TextWrapping="Wrap" Text="news + weather" FontSize="45.333" FontFamily="Segoe WP Light" Margin="0,0,0,8"/>
                        <TextBlock TextWrapping="Wrap" Text="personal finance" FontSize="45.333" FontFamily="Segoe WP Light" Margin="0,0,0,8"/>
                        <TextBlock TextWrapping="Wrap" Text="photo" FontSize="45.333" FontFamily="Segoe WP Light" Margin="0,0,0,8"/>
                        <TextBlock TextWrapping="Wrap" Text="social" FontSize="45.333" FontFamily="Segoe WP Light" Margin="0,0,0,8"/>
                        <TextBlock TextWrapping="Wrap" Text="sports" FontSize="45.333" FontFamily="Segoe WP Light" Margin="0,0,0,8"/>
                        <TextBlock TextWrapping="Wrap" Text="tools + productivity" FontSize="45.333" FontFamily="Segoe WP Light" Margin="0,0,0,8"/>
                        <TextBlock TextWrapping="Wrap" Text="travel + navigation" FontSize="45.333" FontFamily="Segoe WP Light" Margin="0,0,0,8"/>
                    </StackPanel>
				</ScrollViewer>
			</controls:PanoramaItem>

			<!--Panorama item two-->
			<controls:PanoramaItem Header="new">
				<!--Double line list with image placeholder and text wrapping-->
				<Grid>
					<StackPanel Margin="12,0,0,0" >
						<StackPanel DataContext="{Binding Apps[0]}" Tap="AppTileDisplayControl_Tap">
							<TextBlock Text="{Binding Name}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}" Foreground="White" FontFamily="Segoe WP Light" FontSize="40" Margin="0" />
							<TextBlock Text="{Binding Subtitle}" TextWrapping="Wrap" Style="{StaticResource PhoneTextSubtleStyle}" Foreground="White" Margin="0,-10,0,0" FontFamily="Segoe WP SemiLight" />
						</StackPanel>
						<StackPanel  DataContext="{Binding Apps[1]}">
							<TextBlock Text="{Binding Name}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}" Foreground="White" FontFamily="Segoe WP Light" FontSize="40" Margin="0" />
							<TextBlock Text="{Binding Subtitle}" TextWrapping="Wrap" Style="{StaticResource PhoneTextSubtleStyle}" Foreground="White" Margin="0,-10,0,0" FontFamily="Segoe WP SemiLight" />
						</StackPanel>
						<StackPanel  DataContext="{Binding Apps[2]}">
							<TextBlock Text="{Binding Name}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}" Foreground="White" FontFamily="Segoe WP Light" FontSize="40" Margin="0" />
							<TextBlock Text="{Binding Subtitle}" TextWrapping="Wrap" Style="{StaticResource PhoneTextSubtleStyle}" Foreground="White" Margin="0,-10,0,0" FontFamily="Segoe WP SemiLight" />
						</StackPanel>
					</StackPanel>
					<TextBlock Text="more" VerticalAlignment="Bottom" Foreground="White" FontSize="42.667" Margin="12,0,0,76" FontFamily="Segoe WP SemiLight"/>
				</Grid>
			</controls:PanoramaItem>
			<controls:PanoramaItem Header="top">
				<Grid>
					<StackPanel >
						<local:AppDisplayControl DataContext="{Binding Apps[0]}" Subtitle="{Binding Author}" Margin="0,0,0,12" Tap="AppTileDisplayControl_Tap" />
                        <local:AppDisplayControl DataContext="{Binding Apps[1]}" Subtitle="{Binding Author}" Margin="0,0,0,12" />
                        <local:AppDisplayControl DataContext="{Binding Apps[2]}"  Subtitle="{Binding Author}"/>
					</StackPanel>
					<TextBlock Text="more" VerticalAlignment="Bottom" Foreground="White" FontSize="42.667" Margin="12,0,0,76" FontFamily="Segoe WP SemiLight"/>
				</Grid>
			</controls:PanoramaItem>
			<controls:PanoramaItem Header="featured" Orientation="Horizontal">
				<Grid Margin="6,10,0,0">
					<Grid.RowDefinitions>
						<RowDefinition Height="240"/>
						<RowDefinition Height="240"/>
					</Grid.RowDefinitions>
					<Grid.ColumnDefinitions>
						<ColumnDefinition Width="auto"/>
						<ColumnDefinition Width="auto"/>
						<ColumnDefinition Width="auto"/>
					</Grid.ColumnDefinitions>
					<local:AppTileDisplayControl DataContext="{Binding Apps[0]}" Margin="6,0" Tap="AppTileDisplayControl_Tap" VerticalAlignment="Top"  />
					<local:AppTileDisplayControl DataContext="{Binding Apps[1]}" Grid.Column="1" Margin="6,0" VerticalAlignment="Top" />
					<local:AppTileDisplayControl DataContext="{Binding Apps[2]}" Grid.Column="2" Margin="6,0" VerticalAlignment="Top" />
			<local:AppTileDisplayControl DataContext="{Binding Apps[3]}" Grid.Row="1" Margin="6,0" VerticalAlignment="Top"  />
					<local:AppTileDisplayControl DataContext="{Binding Apps[4]}" Grid.Row="1" Grid.Column="1" Margin="6,0" VerticalAlignment="Top" />
					<local:AppTileDisplayControl DataContext="{Binding Apps[5]}" Grid.Row="1" Grid.Column="2" Margin="6,0" VerticalAlignment="Top" />
				</Grid>
			</controls:PanoramaItem>
		</controls:Panorama>
	</Grid>
</phone:PhoneApplicationPage>
